<template>
  <div>{{ book.title }}</div>
  <div>{{ readersNumber }}</div>
  <button @click="count--">book components is {{count}}</button>
  <text ref="testDom">11111</text>
  <button @click="getTest">测试ref获取节点</button>
</template>
<script>
import { ref, reactive } from 'vue'

export default {
  setup () {
    const readersNumber = ref(0)
    const testDom = ref(0)
    const count = ref(0)
    const book = reactive({ title: 'new Vue 3 Guide' })
    console.log(reactive);
    const book1 = { title: 'new Vue 3 Guide' }
    console.log(book1);
    const getTest = function () {
      console.log(testDom.value);
    }
    // expose to template
    return {
      readersNumber,
      testDom,
      count,
      book,

      getTest,
    }
  }
}
</script>